
<html>
<head>
  <title>漂亮jquery选项卡</title>
  <meta charset="UTF-8">
</head>
<script  src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<body>
<style>
ul {list-style-type: none;}
*{margin: 0px;padding: 0px}

    body {
      color: #666;
      font: 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
  

    }
    .tabs {
      margin-top:50px;
      margin-left:50px;
      max-width: 538px;
    }
    
    .tabs-nav li {
      float: left;
      width: 50%;

    }
    .tabs-nav li:first-child a {
      border-right: 0;
      border-top-left-radius: 6px;
    }
    .tabs-nav li:last-child a {
      border-top-right-radius: 6px;
    }
    a {
      background: #eaeaed;
      border: 1px solid #cecfd5;
      color: #0087cc;
      display: block;
      font-weight: 600;
      padding: 10px 0;
      text-align: center;
      text-decoration: none;
    }
    a:hover {
      color: #ff7b29;
    }
    .tab-active a {
      background: #fff;
      border-bottom-color: transparent;
      color: #2db34a;
      cursor: default;
    }
    .tabs-stage {
      border: 1px solid #cecfd5;
      border-radius: 0 0 6px 6px;
      border-top: 0;
      clear: both;
      padding: 24px 30px;
      position: relative;
      top: -1px;
    }
</style>

<div class="tabs">
  <ul class="tabs-nav">
    <li><a href="#tab-1">人物特征</a></li>
    <li><a href="#tab-2">人物简介</a></li>  
  </ul>
  <div class="tabs-stage">
        <div id="tab-1">
          <p>胡耀文，男，清华大学物理系物理42班，前三年平均学分绩94，物理专业第一，年级第二。</p>
        </div>
        <div id="tab-2">
          <p>2017年1月26日，胡耀文凑齐了大学里最想集齐的四颗龙珠，在分析力学、量子力学(1)、电动力学、统计力学(1)这四门物理系最难的必修课“四大力学”达成了全部满分的“大满贯”。</p>
        </div> 
  </div>
</div>
<script>
// 显示第一个默认的面板
$('.tabs-stage div').hide();
$('.tabs-stage div:first').show();
$('.tabs-nav li:first').addClass('tab-active');

// 改变面板显示文本内容
$('.tabs-nav a').on('click', function(event){
  event.preventDefault();
  $('.tabs-nav li').removeClass('tab-active');
  $(this).parent().addClass('tab-active');
  $('.tabs-stage div').hide();
  $($(this).attr('href')).show();
});
</script>
</body>

</html>